<template>
  <div>
    <!-- 搜素表单，用来查询符合条件的商业区信息 -->
    <div class="searchDiv">
      <div class="inputDiv">
        <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商业区编号"  prop="cid">
              <el-input v-model="formInline.cid" placeholder="请输入" />
            </el-form-item>
          <el-form-item label="商业区名" prop="name">
            <el-input v-model="formInline.name" placeholder="请输入"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">
              <el-icon  style="margin-right:5px">
                <Search />
              </el-icon>查询</el-button>
            <el-button @click="reSeting">
              <el-icon style="margin-right:5px">
                <Refresh />
              </el-icon>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="tableDiv" style="height:465px;background:#fff">
      <!-- 新增商业区按钮，会弹出新增信息的弹窗-->
      <div class="addButton">
        <el-button type="primary" @click="() => {
          dialogVisible1 = !dialogVisible1
        }">+ 新增</el-button>
      </div>
      <!--  商业区信息表格 -->
      <el-table :data="tableData" border style="width: 100%;height: 360px;">
        <el-table-column prop="id" label="序号" width="70" />
        <el-table-column prop="cid" label="商业区编号" width="312" />
        <el-table-column prop="name" label="商业区名" width="312" />
        <el-table-column prop="adress" label="商业区地址" width="312" />
        <el-table-column prop="address" label="操作" style="diaplay:flex;align-items: center;">
            <template #default="scope">
              <!-- 点击编辑按钮，弹出编辑窗口 -->
            <span style="color: #1890ff;margin-right: 10px;cursor: pointer;" @click="changeInfo(scope.row.cid)">编辑</span>
            <!-- 点击删除按钮，触发deleInfo方法 -->
            <span style="color: #ff3a3a;cursor: pointer;" @click="deleInfo(scope.row.cid)">删除</span>
            </template>
        </el-table-column>>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top:20px;float:right;">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" background :total="total" :current-page="page"
          :page-size="pageSize" @size-change="sizeChange" @current-change="pageChange" />
      </div>
    </div>
  </div>
  <!--新增信息的弹窗  -->
  <el-dialog width="600" v-model="dialogVisible1" title="新增">
    <el-form ref="ruleFormRef1" :model="ruleForm2" :rules="rules1" label-width="120px" class="demo-ruleForm" status-icon>
      <el-form-item label="商业区编号" prop="cid">
        <el-input v-model="ruleForm2.cid" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="商业区名" prop="name">
        <el-input v-model="ruleForm2.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="商业区地址" prop="adress">
        <el-input v-model="ruleForm2.adress" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="备注" prop="info">
        <el-input v-model="ruleForm2.info" type="textarea" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addInfo">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑信息的弹窗 -->
  <el-dialog v-model="dialogVisible2" title="编辑" :width="600">
    <el-form ref="ruleFormRef2" :model="ruleForm1" :rules="rules2" label-width="120px" class="demo-ruleForm" status-icon>
      <el-form-item label="商业区编号" prop="cid">
        <el-input disabled="disabled" v-model="ruleForm1.cid" />
      </el-form-item>
      <el-form-item label="商业区名" prop="name">
        <el-input v-model="ruleForm1.name" />
      </el-form-item>
      <el-form-item label="商业区地址" prop="adress">
        <el-input v-model="ruleForm1.adress" type="textarea" />
      </el-form-item>
      <el-form-item label="备注" prop="info">
        <el-input v-model="ruleForm1.info" type="textarea" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="confrimInfo">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { getTrades, getInfo, updateInfo, addInfo, deleteInfo } from '@/api/trade'
export default {
  name: 'TradeMsg',
  data () {
    return {
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      dialogVisible1: false,
      dialogVisible2: false,
      ruleForm1: {
        cid: '',
        name: '',
        adress: '',
        info: ''
      },
      ruleForm2: {
        cid: '',
        name: '',
        adress: '',
        info: ''
      },
      // 新增表单的规则
      rules1: {
        cid: [
          { required: true, message: '请输入商业区编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入商业区名', trigger: 'blur' }
        ],
        adress: [
          { required: true, message: '请输入商业区地址', trigger: 'blur' }
        ],
        info: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      // 编辑表单的规则
      rules2: {
        name: [
          { required: true, message: '请输入商业区名', trigger: 'blur' }
        ],
        adress: [
          { required: true, message: '请输入商业区地址', trigger: 'blur' }
        ],
        info: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      formInline: {
        cid: '',
        name: ''
      }
    }
  },
  methods: {
    // 向删除接口发送请求，删除对应cid的信息，刷新页面
    deleInfo (cid) {
      this.$confirm('此操作会彻底删除该商业区信息,确定继续吗?', '删除分类').then(() => {
        deleteInfo({ cid }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1500,
              onClose: () => {
                // 刷新页面
                this.$router.go(0)
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      })
    },
    // 将搜素内容传递给后端，获取符合条件的信息，刷新页面
    onSubmit () {
      this.initTable()
    },
    // 触发表单的resetFields方法，重置表单
    reSeting () {
      // console.log(this.$refs.searchForm)
      const from1 = this.$refs.searchForm
      console.log(from1)
      from1.resetFields()
    },
    // 在验证规则全部通过的时候，向新增接口发送请求，
    addInfo () {
      this.$refs.ruleFormRef1.validate((valid) => {
        if (valid) {
          addInfo({
            ...this.ruleForm2
          }).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 2000,
                onClose: () => {
                  this.$router.go(0)
                  // alert(1)
                }
              })
            }
          })
          this.dialogVisible1 = false
        } else {
          this.$message({
            type: 'error',
            message: ' 信息验证失败，请检查你所填写的内容 '
          })
        }
      })
    },
    // 在验证规则全部通过的时候，向修改接口发送请求，
    confrimInfo () {
      this.$refs.ruleFormRef2.validate((valid) => {
        if (valid) {
          this.dialogVisible2 = false
          updateInfo({
            ...this.ruleForm1
          }).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 2000,
                onClose: () => {
                  this.$router.go(0)
                  // alert(1)
                }
              })
            }
          })
        } else {
          this.$message({
            type: 'error',
            message: ' 信息验证失败，请检查你所填写的内容 '
          })
        }
      })
    },
    // 向商业区详情接口发送请求，初始化编辑窗口
    changeInfo (cid) {
      this.dialogVisible2 = !this.dialogVisible2
      getInfo({ cid }).then((res) => {
        if (res.data.code === 200) {
          this.ruleForm1 = res.data.data
        }
      })
    },
    // 当pageSize改变时，携带改变后的pageSize，发送请求，重新获取商业区表单内容
    sizeChange (size) {
      console.log(size)
      this.pageSize = size
      this.initTable()
    },
    // 当所处page改变时，携带改变后的page，发送请求，重新获取商业区表单内容
    pageChange (page) {
      // this.$router.go(0)
      console.log(page)
      this.page = page
      this.initTable()
    },
    // 向后端请求商业区接口发送请求，获取商业区信息
    initTable () {
      getTrades({
        page: this.page,
        pageSize: this.pageSize,
        cid: this.formInline.cid,
        name: this.formInline.name
      }).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          this.formInline.cid = ''
          this.formInline.name = ''
        }
      })
    }
  },
  created () {
    // 在初始化阶段，调用initTable方法，初始化商业区信息表格
    this.initTable()
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item__content){
  width:185px;
}
.searchDiv {
  // height: auto;
  overflow: auto;

  .inputDiv {
    // height: 42px;
    background: #fff;
    margin-bottom: 10px;
    padding: 15px 10px 0;
    box-sizing: border-box;
  }

}
:deep(.el-dialog) {
  --el-dialog-margin-top: 10vh;
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.el-form-item__content) {
  flex: none;
  width: 400px;
}

:deep(.el-dialog>.el-input) {
  width: 400px;
}

:deep(.el-textarea__inner) {
  height: 96px;
  resize: none;
}

:deep(.el-input__wrapper) {
  width: 400px;
  border-radius: 4px;
  // border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  height: 36px;
  line-height: 36px;
  padding-right: 30px;
}

:deep(.el-form-item__label) {
  font-size: 14px;
  color: #606266;
  width: 100px;
  font-weight: 700;
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #dcdfe6;
  padding: 0 20px;
  height: 56px;
  line-height: 56px;
}

:deep(.el-table .el-table__header-wrapper th) {
  background-color: #f8f8f9;
  color: #515a6e;
  text-align: center;
}

:deep(.el-table--enable-row-transition .el-table__body td) {
  text-align: center;
  font-size: 12px;
}

.addButton {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
</style>
